<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Tutorial</title>
        <link rel="stylesheet" href="../../doc/fonts/stylesheet.css">
        <link rel="stylesheet" href="../../doc/css/prism.css">
        <style media="screen">
            pre.code {
                -moz-border-radius: 10px;
                -webkit-border-radius: 10px;
                border-radius: 10px;
                padding: 10px;
                height: 280px;
                overflow: auto;
                background: #181818;
                border: solid 2px #181818;
            }
            #codelines {
                display: none;
            }
            #svg {
                -moz-border-radius: 10px;
                -webkit-border-radius: 10px;
                border-radius: 10px;
                border: solid 2px #ccc;
                width: 300px;
                height: 300px;
                float: left;
                margin-right: 10px;
                font: 1em source-sans-pro, Source Sans Pro, Helvetica, sans-serif;
            }
        </style>
        <script src="../../dist/snap.svg-min.js"></script>
        <script src="../../doc/js/prism.js"></script>
        <script>
        var S;
        window.onload = function () {
            var s = Snap(850, 35);
            function chooser(s, count) {
                var loop = "M35,65a30,30,0,0,0,0-60a30,30,0,0,0,0,60",
                    line = "M35,65a30,30,0,0,0,0-60a30,30,0,0,0,0,60c30,0,60-60,90-60a30,30,0,0,1,0,60a30,30,0,0,1,0-60",
                    l1 = Snap.path.getTotalLength(loop),
                    l2 = Snap.path.getTotalLength(line),
                    cur = 1,
                    p = s.path({
                        path: loop,
                        fill: "none",
                        stroke: "#f00",
                        strokeWidth: 6,
                        strokeLinecap: "round"
                    });
                for (var i = 1; i <= count; i++) {
                    s.text(90 * i - 55, 49, i).attr({
                        font: "45px source-sans-pro, Source Sans Pro, Helvetica, sans-serif",
                        textAnchor: "middle"
                    });
                    (function (i) {
                        s.circle(90 * i - 55, 35, 40).attr({
                            opacity: 0
                        }).click(eve.f("tut.click", i - 1));
                    }(i));
                }
                s.path("M11.166,23.963L22.359,17.5c1.43-0.824,1.43-2.175,0-3L11.166,8.037c-1.429-0.826-2.598-0.15-2.598,1.5v12.926C8.568,24.113,9.737,24.789,11.166,23.963z").transform("t" + (90 * (count + 1) - 68) + ",18s2");
                var but = s.circle(90 * (count + 1) - 55, 35, 30).attr({
                    fillOpacity: 0,
                    stroke: "#333",
                    strokeWidth: 2
                });
                eve.on("tut.click", function (I) {
                    p.attr({
                        path: loop,
                        transform: "t" + (90 * I) + ",0"
                    });
                    cur = I + 1;
                });
                function frameHandler(frame) {
                    function anim() {
                        cur++;
                        if (cur > count) {
                            return;
                        }
                        if (typeof frame == "function") {
                            frame(cur);
                        }
                        Snap.animate(0, l2 - l1, function (val) {
                            p.attr({
                                path: Snap.path.getSubpath(line, val, val + l1)
                            });
                        }, 500, function () {
                            p.attr({
                                path: loop,
                                transform: p.transform() + "t90,0"
                            });
                        });
                    }
                    if (typeof frame == "function") {
                        but.click(anim);
                    } else {
                        anim();
                    }
                }
                return frameHandler;
            }
            var g = s.g();
            g.attr({
                transform: "s.5,.5,0,0"
            });
            var str = "",
                code = document.getElementById("code");
            var domcodelines = document.querySelectorAll("#codelines li"),
                codelines = [],
                replacers = {},
                lines = [],
                callback = function (i) {
                    lines = [];
                    for (var j = 1; j <= i; j++) {
                        replacers[j - 1] && lines.pop();
                        lines.push(codelines[j - 1]);
                    }
                    Snap("#svg").clear();
                    str = lines.join("\n");
                    eval(str);
                    code.innerHTML = Prism.highlight(str, Prism.languages.javascript);
                    code.parentNode.scrollTop = code.parentNode.scrollTopMax || 1e9;
                };
            for (var i = 0, ii = domcodelines.length; i < ii; i++) {
                codelines[i] = domcodelines[i].innerHTML;
                if (domcodelines[i].className == "replace") {
                    replacers[i] = true;
                }
            }
            callback(1);
            chooser(g, codelines.length)(callback);
            eve.on("tut.click", function (I) {
                callback(I + 1);
            });
        };
        </script>
    </head>
    <body>
        <ol id="codelines">
<li>// First, let's create our drawing surface out of an existing SVG element
// If you want to create a new surface just provide dimensions
// like s = Snap(800, 600);
var s = Snap("#svg");</li>
<li>// Let's create a big circle in the middle:
var bigCircle = s.circle(150, 150, 100);
// By default it is black, let's change its attributes</li>
<li>bigCircle.attr({
    fill: "#bada55",
    stroke: "#000",
    strokeWidth: 5
});</li>
<li>// Now let's create another small circle:
var smallCircle = s.circle(100, 150, 70);</li>
<li>// Let's put this small circle and another one into a group:
var discs = s.group(smallCircle, s.circle(200, 150, 70));</li>
<li>// Now we can change attributes for the whole group
discs.attr({
    fill: "#fff"
});</li>
<li>// Now more interesting stuff
// Let's assign this group as a mask for our big circle
bigCircle.attr({
    mask: discs
});</li>
<li>// Despite our small circle being part of a group
// and part of a mask we can still access it:
smallCircle.animate({r: 50}, 1000);</li>
<li>// We don’t have a reference for second small circle,
// but we can easily grab it with CSS selectors:
discs.select("circle:nth-child(2)").animate({r: 50}, 1000);</li>
<li>// Now let's create pattern
var p = s.path("M10-5-10,15M15,0,0,15M0-5-20,15").attr({
        fill: "none",
        stroke: "#bada55",
        strokeWidth: 5
    });
// To create a pattern,
// just specify dimensions in the pattern method:
p = p.pattern(0, 0, 10, 10);
// Then use it as a fill on the big circle
bigCircle.attr({
    fill: p
});</li>
<li>// We can also grab a pattern from an SVG
// already embedded into our page
discs.attr({
    fill: Snap("#pattern")
});</li>
<li>// Let's change the fill of the circles to gradient
// This string means relative radial gradient
// from white to black
discs.attr({fill: "r()#fff-#000"});
// Note that we have two gradients, one for each circle</li>
<li>// If we want them to share one gradient,
// we need to use an absolute gradient with capital R
discs.attr({fill: "R(150, 150, 100)#fff-#000"});</li>
<li>// Of course we can animate color as well
p.select("path").animate({stroke: "#f00"}, 1000);</li>
<li>// Now let's load an external SVG file:
Snap.load("mascot.svg", function (f) {
    // Note that we traverse and change attr before the SVG
    // is even added to the page
    f.select("polygon[fill='#09B39C']").attr({fill: "#bada55"});
    g = f.select("g");
    s.append(g);
    // Making croc draggable. Go ahead drag it around!
    g.drag();
    // Obviously drag could take event handlers too
    // Looks like our croc is made from more than one polygon...
});</li>
<li class="replace">// Now let's load an external SVG file:
Snap.load("mascot.svg", function (f) {
    // Note that we traverse and change attr before SVG
    // is even added to the page
    f.selectAll("polygon[fill='#09B39C']").attr({fill: "#bada55"});
    g = f.select("g");
    s.append(g);
    // Making croc draggable. Go ahead drag it around!
    g.drag();
    // Obviously drag could take event handlers too
    // That’s better! selectAll for the rescue.
});</li>
<li>// Writing text is as simple as:
s.text(200, 100, "Snap.svg");</li>
<li>// Provide an array of strings (or arrays), to generate tspans
var t = s.text(200, 120, ["Snap", ".", "svg"]);
t.selectAll("tspan:nth-child(3)").attr({
    fill: "#900",
    "font-size": "20px"
});</li>
        </ol>
        <svg id="svg"></svg>
        <pre class="javascript code"><code data-language="javascript" class="language-javascript" id="code"></code></pre>
        <svg width="0" height="0">
            <pattern id="pattern" patternUnits="userSpaceOnUse" x="0" y="0" width="10" height="10" viewBox="0 0 10 10">
                <path d="M-5,0,10,15M0-5,15,10" stroke="white" stroke-width="5"/>
            </pattern>
        </svg>
    </body>
</html>